<script>
  let { world } = $props();
  // NOTE that actions here are indexed 0..9, but UI is indexed as 1..9+0
  const actions = [
    'laser',
    'blink',
    't.kines',
    'maxwell',
    'cyber',
    'pj.fear',
    'merge.e',
    'e.disch',
    'e.laugh',
    'mtrlize',
  ];
</script>

<section class="quickmenu">
  <button><span class="menuid">`</span>menu</button>
  {#each actions as action, i}
    <button><span class="menuid">{(i+1)%10}</span>{action}</button>
  {/each}
  <button><span class="menuid">?</span>help</button>
</section>

<style>
  .quickmenu {
    white-space-collapse: discard; /* wish this could just work ;) */
    align-items: baseline;
    display: flex;
    grid-area: quickmenu;
  }
  .quickmenu button {
    width: 160px;
    text-align: left;
  }
  .menuid {
    color: #8ff;
  }
</style>
